const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin'); //引入插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); //引入抽离css

// 引入mockjs 
const Mock = require("mockjs");
let data = Mock.mock({
    // 列表 
    "list|30": [{
        "img": "@image(50x50,@color)",
        "title": "@ctitle(10)",
        "num|100-200": 100
    }],

    // 数据 
    "pics": [{
        "img": "@image(50x50,@color)",
    }]
})

module.exports = {
    // 入口文件 
    entry: './src/index.js',
    //   出口文件 
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'index.js',
        clean: true,
    },

    // 插件 --- 下载，引入，注册
    plugins: [new HtmlWebpackPlugin({
            template: "./src/index.html",
            filename: "index.html", //打包后生成的网页名
        }), new MiniCssExtractPlugin({
            filename: "style.css"
        }), //抽离scss
    ],

    // 模块 
    module: {
        rules: [
            // 解析css文件 
            {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, "css-loader"],
            },

            // 解析scss 
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // 将 JS 字符串生成为 style 节点
                    'style-loader',
                    // 将 CSS 转化成 CommonJS 模块
                    'css-loader',
                    // 将 Sass 编译成 CSS
                    'sass-loader',
                ],
            },

            // es6转es5 
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },

            // 解析icon图标 
            {
                test: /\.(ttf|svg|eot|woff|woff2)$/i,
                use: ["file-loader"],
            },

            // 解析图片 
            {
                test: /\.(png|jpg|gif)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        esModule: false,
                    },
                }, ],
            },

            // 解析网页图片 
            {
                test: /\.(htm|html)$/i,
                loader: 'html-withimg-loader'
            },
        ],
    },

    // 设置开发模式 
    mode: 'production',
    devtool: "source-map", //重新构建速度较快


    resolve: {
        // 配置别名 
        alias: {
            "@": path.resolve(__dirname, 'src/css'),
            // 配置extension后缀名 
            extensions: ['.js', '.json', '.css'],
        }
    },

    // 启动服务 
    devServer: {
        open: true,
        hot: true, //热更新
        compress: true, //gzip压缩
        progress: true, //编译进度条
        before(app) {
            // 列表 
            app.get("/api/list", (req, res) => {
                    res.send(data.list);
                })

                // 轮播图 
                // app.get("/api/pics", (req, res) => {
                //     res.send(data.pics);
                // })
        }

    }
};